/**
 * @page: 个人认证
 */

import React, { useState, useEffect } from 'react';
import { Alert } from 'antd';
import { useLocation } from 'react-router-dom';
import { getMessage, getCaptchaImage } from './service';
import Hint from './component/Hint/Hint';
import PersonageFrom from './component/PersonageFrom/PersonageFrom';
import ZfbModal from './component/ZfbModal/ZfbModal';
import CommonLoading from '@/components/CommonLoading';

const Personage = () => {

  const [imgCode, setImgCode] = useState({
    src: '',
    key: ''
  });
  const [path, setPath] = useState('');
  const [ZfbModalSwitch, setZfbModalSwitch] = useState(false);
  const [loading, setLoading] = useState(false);
  const [disableSwitch, setisableSwitch] = useState(false);

  const location = useLocation();

  useEffect(() => {
    getCode();
    init();
    messageSwitch();
  }, [])

  // 判断跳转l来源
  const init = () => {
    if (location.state?.name) {
      if (location.state.name == 'lb') {
        setPath('lb');
      }
      if (location.state.name == 'zx') {
        setPath('zx')
      }
    }
  }

  // 获取验证码
  const getCode = async () => {
    const res = await getCaptchaImage();
    if (res.key) {
      setImgCode({
        src: res.image,
        key: res.key
      })
    }
  }

  //判断是否个人认证过
  const messageSwitch = async () => {
    setLoading(true);
    const res = await getMessage({ tenantCode: '000000' })
    setLoading(false);
    if (res.success) {
      if (res.data.authId && res.data.authStatus != 0) {
        setisableSwitch(true)
        // let secondsToGo = 5;
        // const modal = Modal.info({
        //   title: '温馨提示',
        //   content: `个人认证已认证成功，${secondsToGo}秒后将会跳转到账号安全页面，点击确定立即跳转.`,
        //   okText: '确定',
        //   onOk: () => {
        //     modal.destroy();
        //     history.push('/account/safety');
        //   }
        // });
        // const timer = setInterval(() => {
        //   secondsToGo -= 1;
        //   modal.update({
        //     content: `个人认证已认证成功，${secondsToGo}秒后将会跳转到账号安全页面，点击确定立即跳转.`,
        //   });
        // }, 1000);
        // setTimeout(() => {
        //   clearInterval(timer);
        //   modal.destroy();
        //   history.push('/account/safety');
        // }, secondsToGo * 1000);
      }
    }
  }

  const PersonageFromProps = {
    imgCode,
    getCode,
    disableSwitch,
    //通过校验打开支付宝绑定弹窗
    OpenZfbModal() {
      setZfbModalSwitch(true);
    },
  };

  const ZfbModalProps = {
    ZfbModalSwitch,
    path,
    //绑定支付宝弹窗确定事件
    ZfbModalOk() {
      setZfbModalSwitch(false);
    },
    //绑定支付宝弹窗取消事件
    ZfbModalNo() {
      setZfbModalSwitch(false);
    },
  };

  return (
    <>
      <div className="zjf-container">
        <h1 className="page-title">实名认证</h1>
        {
          disableSwitch ? <Alert style={{ marginBottom: 10 }} message="您已通过实名认证，无需再次认证！！！" type="info" /> : null
        }
        <Hint></Hint>
        <PersonageFrom {...PersonageFromProps}></PersonageFrom>
        <ZfbModal {...ZfbModalProps}></ZfbModal>
      </div>
      <CommonLoading loading={loading} />
    </>
  );
};

export default React.memo(Personage, () => {
  return true;
}) 
